<template>
	<view class="mall-item flex">
		<image :src="data.url" mode="aspectFill" class="mall-item__img"></image>
		
		<view class="mall-item__desc flex-column">
			<text class="mall-item__name">{{data.name}}</text>
			
			<view class="mall-item__options flex">
				<view class="mall-item__price">
					<text class="mall-item__price-discount">{{data.min_fee}}</text>
					<text class="mall-item__price-original">{{data.max_fee}}</text>
				</view>
				
				<view class="mall-item__shopping flex">
					<view class="mall-item__shopping-cart flex">
						<image src="/static/shoppingCart.png" mode="aspectFill" class="mall-item__shopping-cart-icon"></image>
					</view>
					
					<button class="mall-item__shopping-btn" @click="open">购买</button>
					<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" class="mall-item__shopping-popup">
						<view class="mall-item__shopping-desc">
							<view class="mall-item__shopping-desc-btn">确定</view>
						</view>
					</uni-popup>
<!-- 					<van-popup 
					v-model:show="show"
					round
					position="bottom"
					>
						<view class="mall-item__shopping-desc">
							<view class="mall-item__shopping-desc-btn">确定</view>
						</view>
					</van-popup> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted, nextTick, watch, isProxy, computed, onUpdated} from 'vue';
  import decMallApi from "/api/dec/decIndex/decMallApi";
	
	const props = defineProps({
		data:Object
	})
	
	// 单个商品
	const mallItem = ref();
	
	const popup = ref();
	
	const show = ref(false);
	
	// const id = computed(()=>props.data.value.id)
	
	// watch(id,(new_val)=>{
	// 	console.log('id变化',new_val);
	// })
	
	// const x = ref(1)
	
	// watch(x,(new_val)=>{
	// 	console.log('show发生变化',new_val);
	// })
	
	function open(){
		popup.value.open();
		// show.value=true;
		// x.value++;
		console.log('props',props.data);
	}
	
	// function onClose(){
	// 	show.value=false
	// }
	
	// 获得商品详情
	async function Product_detail(params){
		// const {id} = params.id;
		try{
			const res =await decMallApi.Product_detail_API(params);
			
			mallItem.value = res.datas||null;
			
			// mallItem.value.merge_attr_datas = [];
			
			// if(res.datas.attr_datas){
			// 	let retArr = [];
			// 	let tempArr = [];
				
			// 	for(let item1 of res.datas.attr_datas){
			// 		if(retArr.length===0){
			// 			retArr = item1.datas;
			// 			continue;
			// 		}
					
			// 		tempArr = [];
					
			// 		for(let item2 of retArr){
			// 			for(let item3 of item1.datas){
			// 				let tempStr = item2 + '/' + item3
			// 				tempArr.push(tempStr);
			// 			}
			// 		}
					
			// 		retArr = tempArr;
			// 	}
				
			// 	mallItem.value.merge_attr_datas = retArr;
			// }
			
			// mallItem.value.datas.product_scroll = baseImgUrl+mallItem.value.product_scroll
			// if(res.datas.product_scroll){
			// 	swiperItems.value = [
			// 		{id:'mallItemSwiper01',advertisement_pic:baseImgUrl+res.datas.product_scroll}
			// 	]
			// }
	
			
			
			console.log('直播详情页商品 Product_detail 获取成功',res);
			
			// console.log(mallItem.value.merge_attr_datas);
		}catch(err){
			console.log('直播详情页商品 Product_detail 获取失败',err);
		}
	}
	
	async function init(params){
		await Product_detail(params);
		// await Mall_home_list();
		// await Get_product_evaluate_list(params);
	}
	
	
	
	onMounted(()=>{
		// init();
		console.log(props.data.value);
		nextTick(()=>{
			// console.log(props.data.value);
			// if(props.data.value.id!==null){
			// 	let params = {
			// 		product_id:props.data.value.id
			// 	}
			// 	init(params);
			// }
		})

	})
	
	onUpdated(()=>{
		// console.log('组件更新后的 props 数据:', props.data);
	})
</script>

<style lang="scss" scoped>
	// 移除button样式
	button{
		padding: 0;
		margin: 0;
	}
	.mall-item{
		width: 100%;
		height: 200rpx;
		box-sizing: border-box;
		padding: 14rpx 24rpx;
		margin-bottom: 53rpx;
		&__img{
			width: 200rpx;
			height: 200rpx;
			margin-right: 32rpx;
		}
		
		&__desc{
			height: 100%;
			padding: 14rpx 0;
			justify-content: space-between;
			flex: 1;
		}
		
		&__name{
			font-size: 30rpx;
			color: #1a1a1a;
		}
		
		&__options{
			width: 100%;
			justify-content: space-between;
		}
		
		&__price{
			
			&-discount{
				color: #fe5100;
				font-size: 36rpx;
				margin-right: 8rpx;
			}
			
			&-original{
				font-size: 24rpx;
				color: #909090;
				position: relative;
				
				&::before{
					content: '';
					position: absolute;
					width: 90%;
					height: 2rpx;
					background-color: #c4c4c4;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}

		}
		
		&__shopping{
			&-cart{
				width: 68rpx;
				height: 50rpx;
				justify-content: center;
				border-radius: 10rpx;
				background-color: #e4e4e4;
				margin-right: 8rpx;
				
				&-icon{
					width: 34rpx;
					height: 34rpx;
				}
			}
			&-btn{
				width: 107rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 10rpx;
				background-color: #fe5100;
				font-size: 30rpx;
				color: #fff;
			}
			
			// 弹窗
			&-popup{
				
			}
			
			// 购物弹窗详情
			&-desc{
				width: 100%;
				background-color: #fff;
				// position: fixed;
				// bottom: 0;
				
				&-btn{
					width: 100%;
					height: 100rpx;
					background-color: #ff9227;
					font-size: 36rpx;
					color: #fff;
					text-align: center;
					line-height: 100rpx;
				}
			}
		}
		

	}
</style>